<template>
  <div>
    <div class="card" style="padding: 15px;width: 50%">
      您好，{{ user?.name }}！欢迎使用本系统
    </div>
    <div style="display: flex;grid-gap: 10px;margin: 10px 0">
      <div style="flex: 1;height: 500px" id="line" class="card"></div>
      <div style="flex: 1;height: 500px" id="bar" class="card"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
const lineOption = {
  title: {
    text: '商品销售额趋势图',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    left: 'left'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true
    },
  ]
}
const barOption = {
  title: {
    text: '销售量柱状图',
    subtext: '基于用户',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    left: 'left'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'bar',
      smooth: true,
      itemStyle: {
        normal: {
          color: function(params) { // 根据索引返回对应的颜色
            let colorList = ['#ffaa2e','#32C5E9','#fa4c4c','#08b448','#FFDB5C','#ff9f7f','#fb7293','#E062AE','#E690D1','#e7bcf3']
            return colorList[params.dataIndex];
          }
        }
      },
    }
  ]
}
export default {
  name: 'Home',
  data() {
    return {
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
    }
  },
  mounted() {
    let linetDom = document.getElementById('line');
    let lineChart = echarts.init(linetDom);
    this.$request.get('/orders/selectLine').then(res => {
      lineOption.xAxis.data = res.data?.map(v => v.name) || []
      lineOption.series[0].data = res.data?.map(v => v.value) || []
      lineChart.setOption(lineOption)
    });
    let barDom = document.getElementById('bar');
    let barChart = echarts.init(barDom);
    this.$request.get('/orders/selectBar').then(res => {
      barOption.xAxis.data = res.data?.map(v => v.name) || []
      barOption.series[0].data = res.data?.map(v => v.value) || []
      barChart.setOption(barOption)
    })
  }
}
</script>

<style scoped>
.card {
  /* 背景颜色 */
  background-color: #fff;

  /* 边框样式 */
  border: 1px solid #e0e0e0;

  /* 圆角 */
  border-radius: 8px;

  /* 盒子阴影效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* 内边距 */
  padding: 20px;

  /* 外边距 */
  margin: 20px 0;

  /* 宽度设置，可以根据实际情况调整 */
  width: 100%;
  max-width: 800px;

  /* 确保内容垂直居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
